<template>
  <Content style="width: 462px;height:290px;">
    <!--    <span style="color:white;font-size:12px;margin-left: 10px;">销量/天数（自然日）：履约中位数：20天，平均天数35天</span>-->
    <div class="map" ref="echart"></div>
  </Content>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Content from './component/content.vue'
import * as echarts from "echarts"
import {  orderCycleTime } from "@/api/bigData/ofsTime.js";
import { removeLeadingZero} from "@utils/utils.js";
import dayjs from 'dayjs'
const echart = ref(null);
const monthList = ref([])
const list = ref([])
let myWater
const init = async () => {
  const res = await orderCycleTime({})
  list.value = res.result.records.sort((a, b) => dayjs(a.month).isBefore(b.month) ? -1 : 1);
  let option = {
    legend: {
      textStyle: {
        color: '#FFFFFF'
      },
      top: '15px',
      data: ['尾程快递平均履约天数','尾程卡派平均履约天数','90%的订单的快递时间','90%的订单的卡派时间']
    },
    tooltip: {
      trigger: 'axis',
      extraCssText: 'background: linear-gradient(to right, #032147, #0b3764, #032147)',
      textStyle: {
        color: "#fff"
      },
      borderColor: '#4c64b3',
    },
    grid: {
      left: '6%',
      right: '6%',
      bottom: '3%',
      top: '30%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: list.value.map(item => item.month),
      axisLine: {
        lineStyle: {
          color: '#FFFFFF'
        }
      }
    },
    yAxis: {
        name: '天数',
        type: 'value',
        position: 'left',
        min: 0,
        axisLine:{
          lineStyle:{
            color:'#FFFFFF',
          }
        },
    },
    series: [
      {
        name: '尾程快递平均履约天数',
        type: 'line',
        data: list.value.map(item => item.express_fulfillment_data),
      },
      {
        name: '尾程卡派平均履约天数',
        type: 'line',
        data: list.value.map(item => item.truck_fulfillment_data),
      },
      {
        name: '90%的订单的快递时间',
        type: 'line',
        data: list.value.map(item => item.express_ninety_fulfillment_data),
      },
      {
        name: '90%的订单的卡派时间',
        type: 'line',
        data: list.value.map(item => item.truck_ninety_fulfillment_data),
      },
    ]
  }
  myWater.clear()
  //设置配置项
  myWater.setOption(option);
}
onMounted(async () => {
  myWater = echarts.init(echart.value);
  await init()
});
defineExpose({
  init
})
</script>

<style scoped>
body {
  color: white
}

.map {
  height: 100%;
  width: 100%;
}
</style>
